<!-- part HTML_SETTINGS_HEADER --><!DOCTYPE html><html><head><title>HAA Installer</title><style type="text/css">
html,input,textarea{font-size:38px;font-family:Arial;}
h1{font-size:120%;text-align:center;}
body .container{width:22em;margin:0 auto;padding:0.5em;}
label{display:block;}
input[type=text],input[type=password]{width:100%;box-sizing:border-box;}
input[type=checkbox] {transform: scale(1.8);}
textarea {width: 100%; box-sizing: border-box;}
input[type=submit],input[type=button]{width: 100%;border:1px solid black;text-decoration:none;padding:0.25em 5em;color:white;background-color:#4caf50;cursor:pointer;-webkit-appearance: none;-webkit-border-radius:0;}
input[type=button]#refresh{background-color: #44bbe3;}
input[type=submit]#join{background-color: #4caf50;}
input[type=submit][disabled]{color:#aaaaaa;background-color:#eeeeee !important;}
.networks{list-style:none;margin:1em 0;padding:0;}
.networks li{cursor:pointer;padding:0.25em;margin-bottom:0.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-left:1.1em;}
.networks li.secure::before{content:"🔒";position:absolute;left:0;}
.networks li.selected{font-weight:bold;background-color:#ddd}
.networks li:hover{background-color:#eee;}
.networks li.other{border-top:2px solid #aaa;text-align:center;}
.nonetworks{text-align:center;margin:1em 0;}
.field{margin-bottom:0.5em;}
.field.required label::before{content:"*";color:red;}
</style></head><body><div class="container"><h1>Home Accessory Architect<br> Installer v2.1</h1>
<form action="/settings" method="post">
<div class="field required conf">
<label for="conf">JSON Config:</label>
<textarea id="conf" name="conf">
<!-- part HTML_SETTINGS_MIDDLE --></textarea><br>
<input type="checkbox" name="nowifi" value="y"> Remove WiFi Settings<br>
<input type="checkbox" name="autoota" value="y" <!-- part HTML_SETTINGS_AUTOOTA -->> Auto OTA Updates<br>
</div>
<input type="submit" id="join" value="Save" /><br><br>
<input type="button" id="refresh" value="⟲ WiFi Networks" onClick="window.location.reload(true)"/>
<div class="nonetworks" style="display:none;">
No networks found
</div>
<ul id="networks" class="networks">
<!-- part HTML_NETWORK_ITEM -->{% for network in networks %}
<li class="{{ network.secure | ternary('secure', 'unsecure') }}">{{ network.ssid }}</li>
{% endfor %}
<!-- part HTML_SETTINGS_FOOTER --><li class="other">Enter SSID manually</li>
</ul>
<div class="field required ssid" style="display:none;">
<label for="ssid">SSID:</label>
<input type="text" id="ssid" name="ssid" />
</div>
<div class="field required password" style="display:none;">
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</div>
</form>
<center>by Jos&eacute; A. Jim&eacute;nez Campos</center>
</div>
<script>
var ssid_field, password_block, password_field, join_button;
networks_block = document.getElementById('networks');
ssid_block = document.querySelector('.field.ssid');
ssid_field = document.getElementById('ssid');
password_block = document.querySelector('.field.password');
password_field = document.getElementById('password');
join_button = document.getElementById('join');
function enable(e) { e.disabled = ''; }
function disable(e) { e.disabled = 'disabled'; }
function show(e) { e.style.display = 'block'; }
function hide(e) { e.style.display = 'none'; }
function selectNetwork(e) {
let nets = document.querySelectorAll('ul.networks li');
for (var i=0; i<nets.length; i++) {
nets[i].classList.remove('selected');
}
e.classList.add('selected');
}
var nets, i;
nets = document.querySelectorAll('ul.networks li.unsecure');
for (i=0; i<nets.length; i++) {
nets[i].onclick = function(event) {
event.preventDefault();
selectNetwork(this);
ssid_field.value = this.innerText;
hide(ssid_block);
hide(password_block);
disable(password_field);
password_field.value = '';
enable(join_button);
}
}
nets = document.querySelectorAll('ul.networks li.secure');
for (i=0; i<nets.length; i++) {
nets[i].onclick = function(event) {
event.preventDefault();
selectNetwork(this);
ssid_field.value = this.innerText;
hide(ssid_block);
enable(password_field);
show(password_block);
disable(join_button);
password_block.classList.add('required');
}
}
nets = document.querySelectorAll('ul.networks li.other');
for (i=0; i<nets.length; i++) {
nets[i].onclick = function(event) {
event.preventDefault();
if (this.classList.contains('selected'))
return;

selectNetwork(this);
ssid_field.value = "";
show(ssid_block);
show(password_block);
enable(ssid_field);
enable(password_field);
disable(join_button);
password_block.classList.remove('required');
}
}
if (document.querySelectorAll('ul.networks li').length == 1) {
show(document.querySelector('.nonetworks'));
}
let s = ssid_field;
let p = password_field;
s.onchange = s.onkeydown = s.onpaste = s.oninput =
p.onchange = p.onkeydown = p.onpaste = p.oninput = function(event) {
var f = enable;
if (ssid_block.classList.contains('required') && ssid_field.value == '') {
f = disable;
}
if (password_block.classList.contains('required') && password_field.value == '') {
f = disable;
}
f(join_button);
}
</script></body></html>
